<template>
    <!-- 营销设置 -->
    <el-drawer
        title="营销设置"
        :visible="drawer == 'market'"
        direction="rtl"
        size="40%"
        :before-close="handleClose"
    >
        <div>
            <el-form ref="form" label-width="120px">
                <el-form-item label="免费学习任务">
                    <div class="taskBox">
                        <el-checkbox-group v-model="task">
                            <el-checkbox
                                name="task"
                                style="width:95%"
                                class="taskItem"
                                v-for="(item, i) in lessonList"
                                :key="i"
                                :label="i"
                            >
                                <div class="row ali_cen ju_bet">
                                    <div
                                        class="line_1"
                                        style="width: 0;flex:1;"
                                    >
                                        <i
                                            class="el-icon-video-play"
                                            style="margin-right:5px"
                                        ></i>
                                        <span>{{ item.title }}</span>
                                    </div>
                                    <el-button
                                        v-if="item.isFree == 'T'"
                                        type="warning"
                                        size="mini"
                                        >免费</el-button
                                    >
                                </div>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </el-form-item>
                <div class="row ju_cen">
                    <el-button type="primary" @click="putLesson"
                        >保存</el-button
                    >
                </div>
            </el-form>
        </div>
    </el-drawer>
</template>
<script>
import { lessonList, putLessonBatch } from "@/api/edu/service";
export default {
    name: "Config",
    data() {
        return {
            lessonList: [],
            task: []
        };
    },
    props: ["drawer", "courseId"],
    watch: {
        drawer() {
            if (this.drawer == "market") {
                lessonList(this.courseId).then(res => {
                    this.lessonList = res.data.list;
                    let task = [];
                    this.lessonList.forEach((item, i) => {
                        if (item.isFree == "T") {
                            task.push(i);
                        }
                    });
                    this.task = task;
                });
            }
        },
        task(newValue) {
            this.lessonList.forEach((item, i) => {
                item.isFree = newValue.indexOf(i) >= 0 ? "T" : "F";
            });
        }
    },
    created() {},
    methods: {
        // 关闭抽抽屉
        handleClose(done) {
            // this.drawer = "";
            this.task = [];
            this.$emit("update:drawer", "");
            // done();
        },
        putLesson() {
            putLessonBatch(this.courseId, this.lessonList).then(res => {
                this.task = [];
                this.handleClose();
            });
        }
    }
};
</script>
<style lang="scss">
.dialogForm {
    display: block;
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>
